Flutter এর জন্য Text এবং Font Styling

Flutter-এ টেক্সট এবং ফন্ট স্টাইলিং অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি অ্যাপ্লিকেশনের ভিজ্যুয়াল এফেক্ট এবং পাঠযোগ্যতা উন্নত করতে সাহায্য করে। Flutter-এর Text উইজেট এবং TextStyle ক্লাস ব্যবহার করে বিভিন্ন ধরণের টেক্সট এবং ফন্ট স্টাইলিং করা যায়। নিচে Flutter-এ টেক্সট এবং ফন্ট স্টাইলিংয়ের বিস্তারিত আলোচনা দেওয়া হলো।

১. Text উইজেট

Flutter-এ Text উইজেট ব্যবহার করে আপনি টেক্সট প্রদর্শন করতে পারেন। এটি একটি সাধারণ উইজেট, যা অ্যাপ্লিকেশনের বিভিন্ন স্থানে টেক্সট দেখানোর জন্য ব্যবহৃত হয়।

Text(
  'Hello, Flutter!',
)

২. TextStyle ব্যবহার করে টেক্সট কাস্টমাইজ করা

TextStyle ক্লাস ব্যবহার করে টেক্সটের বিভিন্ন দিক যেমন ফন্ট সাইজ, ফন্ট ওয়েট, ফন্ট ফ্যামিলি, রঙ, এবং আরও অনেক কিছু কাস্টমাইজ করা যায়।

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24, // ফন্টের আকার
    fontWeight: FontWeight.bold, // ফন্টের ওজন
    color: Colors.blue, // ফন্টের রঙ
    fontStyle: FontStyle.italic, // ফন্টের স্টাইল (italic বা normal)
  ),
)

TextStyle-এর প্রপার্টিস

TextStyle ক্লাসের কিছু গুরুত্বপূর্ণ প্রপার্টি:

• fontSize: ফন্টের আকার নির্ধারণ করে (ডিফল্ট আকার: 14.0 পিক্সেল)।
• fontWeight: ফন্টের ওজন বা বোল্ডনেস নির্ধারণ করে (যেমন FontWeight.bold, FontWeight.w600)।
• color: ফন্টের রঙ নির্ধারণ করে।
• fontStyle: ফন্টকে italic বা normal করতে ব্যবহৃত হয়।
• letterSpacing: টেক্সটের প্রতিটি অক্ষরের মধ্যে দূরত্ব নির্ধারণ করে।
• wordSpacing: প্রতিটি শব্দের মধ্যে দূরত্ব সেট করে।
• decoration: টেক্সটের নিচে, উপরে, বা মাধ্যমে লাইন যোগ করতে ব্যবহৃত হয় (যেমন underline, overline, lineThrough)।
• fontFamily: কাস্টম ফন্ট সেট করতে ব্যবহার করা হয়।

উদাহরণ ১: টেক্সট স্টাইলিং

Text(
  'Stylized Text',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w500,
    color: Colors.deepPurple,
    letterSpacing: 2.0,
    wordSpacing: 5.0,
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

৩. কাস্টম ফন্ট ব্যবহার করা

Flutter-এ আপনি কাস্টম ফন্ট যোগ করে Text উইজেটগুলোতে ব্যবহার করতে পারেন। এটি অ্যাপ্লিকেশনের ব্র্যান্ডিং এবং ভিজ্যুয়াল স্টাইল উন্নত করতে সাহায্য করে।

ধাপ ১: ফন্ট ফাইল যোগ করা

1. প্রজেক্টের pubspec.yaml ফাইলে ফন্ট ফাইল অ্যাড করতে হবে। assets/fonts/ ডিরেক্টরি তৈরি করে সেখানে ফন্ট ফাইল রাখুন।
2. pubspec.yaml ফাইলে নিচের কোড যোগ করুন:
   • এখানে CustomFont হলো ফন্ট ফ্যামিলির নাম এবং ফন্ট ফাইলগুলো আলাদাভাবে উল্লেখ করা হয়েছে।

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

ধাপ ২: কাস্টম ফন্ট ব্যবহার করা

Text(
  'This is custom font!',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 24,
  ),
)

৪. থিমের মাধ্যমে ফন্ট স্টাইলিং করা

Flutter-এ ThemeData ব্যবহার করে গ্লোবালি টেক্সট এবং ফন্টের স্টাইল সেট করা যায়, যা পুরো অ্যাপ্লিকেশনে প্রয়োগ হয়।

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18, color: Colors.black),
      headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Colors.blue),
    ),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text('Themed App')),
    body: Center(
      child: Column(
        children: [
          Text('This is body text', style: Theme.of(context).textTheme.bodyText1),
          Text('This is headline', style: Theme.of(context).textTheme.headline1),
        ],
      ),
    ),
  ),
)

• TextTheme: বিভিন্ন ধরনের টেক্সট স্টাইল (যেমন bodyText1, headline1, caption) সেট করতে ব্যবহার করা হয়।
• থিম ব্যবহার করে টেক্সট স্টাইল সেট করলে তা অ্যাপ্লিকেশনের বিভিন্ন স্থানে পুনরায় ব্যবহার করা যায়, যা কোডকে সংগঠিত এবং পুনঃব্যবহারযোগ্য করে তোলে।

৫. TextAlign এবং TextDirection ব্যবহার করা

Flutter-এ টেক্সটের বিন্যাস নিয়ন্ত্রণ করতে TextAlign এবং TextDirection প্রপার্টি ব্যবহার করা যায়।

• TextAlign: টেক্সটের অভ্যন্তরে অক্ষরগুলোর সারিবদ্ধতা নির্ধারণ করে। যেমন: TextAlign.left, TextAlign.center, TextAlign.right।
• TextDirection: টেক্সটের দিক নির্ধারণ করে (LTR বা RTL)।

Text(
  'Center Aligned Text',
  textAlign: TextAlign.center,
  style: TextStyle(fontSize: 20),
)

Text(
  'Right to Left Text',
  textDirection: TextDirection.rtl,
  style: TextStyle(fontSize: 20),
)

৬. RichText উইজেট ব্যবহার করা

RichText উইজেট ব্যবহার করে আপনি একাধিক টেক্সট স্টাইল এবং ফরম্যাট একসঙ্গে প্রয়োগ করতে পারেন। এটি কাস্টমাইজড টেক্সট তৈরি করার জন্য খুবই কার্যকর।

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 24, color: Colors.black),
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' and '),
      TextSpan(text: 'italic', style: TextStyle(fontStyle: FontStyle.italic)),
    ],
  ),
)

• RichText উইজেটের মাধ্যমে টেক্সটের বিভিন্ন অংশে আলাদা আলাদা স্টাইল প্রয়োগ করা যায়।

Flutter-এ টেক্সট এবং ফন্ট স্টাইলিংয়ের সংক্ষেপে:

• Text উইজেট ব্যবহার করে টেক্সট প্রদর্শন করা হয়।
• TextStyle ব্যবহার করে টেক্সটের ফন্ট সাইজ, ওজন, রঙ, এবং আরও অনেক কিছু কাস্টমাইজ করা যায়।
• কাস্টম ফন্ট যোগ করে অ্যাপ্লিকেশনকে ব্র্যান্ডিং এবং ভিজ্যুয়াল স্টাইলের সাথে মিলিয়ে নিতে পারেন।
• ThemeData ব্যবহার করে গ্লোবালি ফন্ট স্টাইল সেট করতে পারেন, যা কোড পুনঃব্যবহারযোগ্য এবং পরিচালনাযোগ্য করে।
• RichText উইজেট ব্যবহার করে কাস্টমাইজড এবং স্টাইল করা টেক্সট তৈরি করতে পারেন।

এভাবে, Flutter-এ Text এবং Font Styling নিয়ে কাজ করা যায়, যা অ্যাপ্লিকেশনের ডিজাইন এবং ভিজ্যুয়াল এক্সপ্রেশানকে আরও উন্নত করে।